<script lang="ts" setup>
import { useVModel } from "@/utils/useVModel";
import IconSvg from "@/components/IconSvg/index.vue";
import { imgApiUrl } from "@/services/upload";
import { getToken } from "@/utils/localToken";
const props = defineProps({
	modelValue: {
		type: Object,
		required: true,
	},
	medicalType: {
		type: Array<{ id: number; name: string | number }>,
		default: () => [],
		required: true,
	},
	medicalLevel: {
		type: Array<{ id: number; name: string | number }>,
		default: () => [],
		required: true,
	},
});
const emit = defineEmits(["update:modelValue"]);

const model = useVModel(props, "modelValue", emit);

const formRef = ref();
const instance = getCurrentInstance();
onMounted(() => {
	if (instance && instance.exposed) {
		const entries = Object.entries(formRef.value.$.exposed);

		for (const [key, value] of entries) {
			instance.exposed[key] = value;
		}
	}
});

defineExpose(instance && instance.exposed ? { ...instance.exposed } : {});
const rules = ref({
	name: [{ required: true, message: "请输入机构名称", trigger: "change" }],
	typeId: [{ required: true, message: "请输入机构类型", trigger: "change" }],
	levelId: [{ required: true, message: "请输入机构等级", trigger: "change" }],
	institutionKilometre: [{ required: true, message: "请输入起步公里数", trigger: "change" }],
	baseTrafficPrice: [{ required: true, message: "请输入起步价", trigger: "change" }],
	institutionPrice: [{ required: true, message: "请输入每公里单价", trigger: "change" }],
	institutionFarPrice: [{ required: true, message: "请输入远距离单价", trigger: "change" }],
	institutionPicUrl: [{ required: true, message: "请上传医疗机构图片", trigger: "change" }],
	province: [{ required: true, message: "请选择省、市", trigger: "change" }],
	city: [{ required: true, message: "请选择省、市", trigger: "change" }],
	street: [{ required: true, message: "请选择区县、街道", trigger: "change" }],
	area: [{ required: true, message: "请选择区县、街道", trigger: "change" }],
	addressLng: [{ required: true, message: "请选择经、纬度", trigger: "change" }],
	addressLat: [{ required: true, message: "请选择经、纬度", trigger: "change" }],
	addressDetail: [{ required: true, message: "请选择详细地址", trigger: "change" }],
});

// map弹窗
const mapVisible = ref(false);
const onCancel = () => {
	mapRef.value = null;
	mapVisible.value = false;
};
const onConfirm = () => {
	mapRef.value = null;
	mapVisible.value = false;
};
const mapRef = ref<any>(null);
const center = ref<number[]>([120.198817, 30.291173]);
const zoom = ref(12);
const map = ref<any>(null);
const init = (o: { getCenter: () => any }) => {
	map.value = o;

	//console.log("setup init $refs: ", mapRef.value.$$getInstance());
};

const selectPoi = (e: any) => {
	console.log("selectPoi: ", e);
};
const choosePoi = (e: any) => {
	console.log("choosePoi: ", e);
};

const getAddress = (lnglat: number[]) => {
	const geocoder = new AMap.Geocoder({});
	return new Promise<void>((resolve, reject) => {
		geocoder.getAddress(lnglat, function (status: any, result: any) {
			if (status === "complete" && result.info === "OK") {
				const obj = {
					formattedAddress: result.regeocode.formattedAddress,
					...result.regeocode.addressComponent,
				};
				resolve(obj);
			} else {
				reject(status);
			}
		});
	});
};

const clickLocation = async (e: { lnglat: { lng: number; lat: number } }) => {
	// 经纬度
	const { lng, lat } = e.lnglat;
	center.value = [lng, lat];
	// 经纬度转地址
	const address: any = await getAddress([lng, lat]);
	model.value = {
		...model.value,
		addressLng: lng,
		addressLat: lat,
		addressDetail: address.formattedAddress,
		city: address.city,
		province: address.province,
		area: address.district,
		street: address.township || address.street,
	};
};

const headers = computed(() => {
	return { Authorization: getToken() };
});
</script>

<template>
	<el-form :model="model" :rules="rules" label-width="auto" ref="formRef">
		<el-form-item label="机构名称：" prop="name" placeholder="请输入机构名称">
			<el-input v-model="model.name" />
		</el-form-item>
		<el-form-item label="机构类型：" prop="typeId">
			<el-select v-model="model.typeId" placeholder="请选择机构类型" style="width: 100%">
				<el-option v-for="item in medicalType" :key="item.id" :label="item.name" :value="item.id" />
			</el-select>
		</el-form-item>
		<el-form-item label="机构等级：" prop="levelId">
			<el-select v-model="model.levelId" placeholder="请选择机构等级" style="width: 100%">
				<el-option v-for="item in medicalLevel" :key="item.id" :label="item.name" :value="item.id" />
			</el-select>
		</el-form-item>
		<el-form-item label="机构地址：" prop="addressDetail">
			<el-input v-model="model.addressDetail" placeholder="请点击选择地址">
				<template #append>
					<el-button type="primary" @click="mapVisible = true"> <IconSvg name="map" />&nbsp;定位 </el-button>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item label="机构简介：" prop="intro">
			<el-input v-model="model.intro" type="textarea" :row="2" placeholder="请输入机构简介" />
		</el-form-item>
		<el-form-item label="起步价格包含公里数：" prop="institutionKilometre">
			<el-input v-model="model.institutionKilometre" type="number" placeholder="请输入起步价格包含公里数" />
		</el-form-item>
		<el-form-item label="起步价格：" prop="baseTrafficPrice">
			<el-input v-model="model.baseTrafficPrice" type="number" placeholder="请输入起步价格" />
		</el-form-item>
		<el-form-item label="每公里单价：" prop="institutionPrice">
			<el-input v-model="model.institutionPrice" type="number" placeholder="请输入每公里单价" />
		</el-form-item>
		<el-form-item label="远距离单价：" prop="institutionFarPrice">
			<el-input v-model="model.institutionFarPrice" type="number" placeholder="请输入远距离单价" />
		</el-form-item>
		<el-form-item label="排序：" prop="sort">
			<el-input v-model="model.sort" type="number" />
		</el-form-item>

		<el-form-item label="机构图片：" prop="institutionPicUrl">
			<el-upload
				class="avatar-uploader"
				:action="imgApiUrl"
				:headers="headers"
				name="files"
				:show-file-list="false"
				:on-success="(response:any) => model.institutionPicUrl = response?.data[0]"
			>
				<img v-if="model.institutionPicUrl" :src="model.institutionPicUrl" class="avatar" />
				<el-icon v-else class="avatar-uploader-icon"><IconSvg name="add" /></el-icon>
			</el-upload>
		</el-form-item>
		<el-form-item label="状态：" prop="isShow">
			<el-switch v-model="model.isShow" :active-value="0" :inactive-value="1" />
		</el-form-item>
	</el-form>
	<el-dialog v-model="mapVisible" class="map-dialog" title="定位信息" top="10vh" width="700px" :before-close="onCancel">
		<el-form label-width="100px" :model="model" :rules="rules">
			<el-form-item label="省、市" prop="province">
				<el-row :gutter="5" style="width: 100%" justify="space-between">
					<el-col :span="12" style="margin: 0"><el-input v-model="model.province" /> </el-col>
					<el-col :span="12" style="margin: 0"><el-input v-model="model.city" /></el-col>
				</el-row>
			</el-form-item>
			<el-form-item label="区县、街道" prop="area">
				<el-row :gutter="4" style="width: 100%" justify="space-between">
					<el-col :span="12" style="margin: 0"><el-input v-model="model.area" /> </el-col>
					<el-col :span="12" style="margin: 0"><el-input v-model="model.street" /></el-col> </el-row
			></el-form-item>
			<el-form-item label="经、维度" prop="addressLng">
				<el-row :gutter="4" style="width: 100%" justify="space-between">
					<el-col :span="12" style="margin: 0"><el-input v-model="model.addressLng" /> </el-col>
					<el-col :span="12" style="margin: 0"><el-input v-model="model.addressLat" /></el-col> </el-row
			></el-form-item>
			<el-form-item label="详细地址" prop="addressDetail"> <el-input v-model="model.addressDetail" /> </el-form-item>
		</el-form>
		<div id="map">
			<el-amap
				:center="center"
				:zoom="zoom"
				:min-zoom="10"
				:max-zoom="22"
				@init="init"
				ref="mapRef"
				@click="clickLocation"
			>
				<el-amap-search-box :debounce="1000" placeholder="请输入地址" @select="selectPoi" @choose="choosePoi" />
				<el-amap-marker :position="center"></el-amap-marker>
				<el-amap-control-scale />
			</el-amap>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="onCancel">取消</el-button>
				<el-button type="primary" @click="onConfirm"> 确认 </el-button>
			</span>
		</template>
	</el-dialog>
</template>
<style lang="scss" scoped>
:deep(.avatar-uploader) {
	margin-bottom: -10px;
	.el-upload {
		position: relative;
		overflow: hidden;
		cursor: pointer;
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		transition: var(--el-transition-duration-fast);
	}
	.obscuration {
		position: absolute;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100px;
		height: 100px;
		padding: 20px;
		background: rgb(0 0 0 / 20%);
	}
	.el-upload:hover {
		border-color: var(--el-color-primary);
	}
	img {
		width: 100px;
		height: 100px;
	}
	.el-icon.avatar-uploader-icon {
		width: 100px;
		height: 100px;
		font-size: 28px;
		color: #8c939d;
		text-align: center;
	}
}
.map-dialog {
	.el-dialog__body {
		padding-top: 0;
		padding-bottom: 0;
	}
}
#map {
	width: 100%;
	height: 340px;
	&:deep(.amap-sug-result),
	.amap-sug-result {
		z-index: 1000;
	}
}
</style>
